<template>
  <a-row type="flex" justify="center">
    <!-- slider start  移动端 -->
    <a-drawer
      title="过滤条件"
      :width="300"
      :visible="is_drawer_visible"
      :body-style="{ paddingBottom: '80px' }"
      @close="onDrawerClose"
    >
      <div class="logo" />
      <sider-search :state="search_result"> </sider-search>
    </a-drawer>
    <!-- slider  end  移动端 -->
    <a-col
      :xs="24"
      :sm="24"
      :md="24"
      :lg="22"
      :xl="19"
      :style="
        GetIspc
          ? 'box-shadow: 0 40px 80px 0 rgb(0 0 0 / 30%); margin-top: 0px'
          : 'box-shadow: 0 40px 80px 0 rgb(0 0 0 / 30%); margin-top: 40px'
      "
    >
      <a-layout id="components-layout-demo-top" class="layout">
        <a-back-top />

        <!-- slider start pc -->
        <a-layout-sider
          v-show="show_sider && !GetIspc"
          theme="light"
          width="25%"
          breakpoint="lg"
          collapsed-width="0"
          @collapse="onSearchSideCollapse"
          @breakpoint="onSearchSideBreakpoint"
        >
          <div class="logo" />
          <sider-search :state="search_result"> </sider-search>
        </a-layout-sider>
        <!-- slider pc end -->
        <a-layout-content style="width: 72%; background: #fff; padding: 20px">
          <a-row>
            <a-affix v-show="!is_show_sider_bar" style="text-align:right">
              <a-button @click="affixChange">
                <a-icon type="menu-unfold"></a-icon>
              </a-button>
            </a-affix>
          </a-row>
          <a-card>
            <a-row>
              <a-divider dashed />
            </a-row>
            <a-row>
              <!-- search  start -->

              <search-box ref="child" />
              <!-- search  end -->
            </a-row>

            <a-row>
              <a-divider dashed />
            </a-row>
            <a-row>
              <slot name="book">
                <div
                  v-for="(item, index) in getfilters"
                  :key="index"
                  style="height: 50px; line-height: 50px; float: left"
                >
                  <a-tag
                    closable
                    visible
                    @close="() => handleClose(item)"
                    style="padding: 5px; color: #ff5e0f"
                  >
                    {{ item.fieldValue }}
                  </a-tag>
                </div>
              </slot>
            </a-row>
            <a-row v-show="show_pagination && total_counts > 0 && !showdetail">
              <search-pagination
                facets_lists="facets_lists"
                :sort_fields="sort_fields"
                :page_current="page_current"
                :total_counts="total_counts"
                :page_size_options="page_size_options"
                :page_size_default="page_size_default"
                :page_size="page_size"
              >
              </search-pagination>
            </a-row>

            <a-row :gutter="2">
              <a-divider dashed />
            </a-row>
          </a-card>
          <!-- 检索列表  start -->
          <a-row v-show="show_sider">
            <a-list :grid="{ gutter: 16 }" :loading="loading_over">
              <a-list-item v-for="(book, index) in books" :key="index">
                <book-list v-on:showbookid="ShowBookId" :book="book">
                </book-list>
              </a-list-item>
            </a-list>
          </a-row>
          <!-- 纸书详情 -->
          <div class="amodal">
            <a-modal
              :footer="null"
              title="图书详情"
              :visible="is_bookinfo_visible"
              width="60%"
              @ok="handleOk"
              @cancel="handleCancel"
            >
              <book-info ref="bookinfo_child" :title="bookinfo_title">
              </book-info>
            </a-modal>
          </div>
          <!-- 纸书详情 -->
          <!-- 检索列表 end -->
          <a-row v-show="show_pagination && total_counts > 0 && !showdetail">
            <a-card>
              <search-pagination
                facets_lists="facets_lists"
                :sort_fields="sort_fields"
                :page_current="page_current"
                :total_counts="total_counts"
                :page_size_options="page_size_options"
                :page_size_default="page_size_default"
                :page_size="page_size"
              >
              </search-pagination>
            </a-card>
          </a-row>
        </a-layout-content>
      </a-layout>
    </a-col>
  </a-row>
</template>

<script>
import BookList from "./common/BookList.vue";
import SiderSearch from "./common/SiderSearch";

import SearchBox from "./common/SearchBox.vue";
import SearchPagination from "./common/SearchPagination.vue";
// import VueSlider from "vue-slider-component";
// import "vue-slider-component/theme/default.css";
// Vue.use(VueAxios, axios);
import BookInfo from "./common/BookInfo.vue";
export default {
  //   name : "MainContent",
  components: {
    // VueSlider,
    "book-list": BookList,
    "book-info": BookInfo,
    "sider-search": SiderSearch,
    "search-box": SearchBox,
    "search-pagination": SearchPagination,
  },
  data() {
    return {
      // booklist
      header: {},
      body: {},
      headStyles: {
        color: "#2780e3",
        background: "#f5f5f5",
      },
      customStyle: "color:#2780e3",

      book_already_showing: false,
      is_show_sider_bar: false,
      is_drawer_visible: false,
      drawer_palcement: "left",
      is_bookinfo_visible: false,
      bookinfo_title: "",
      is_bookinfo_spinning: false,
      intro: "",
      info: [],
      sliderList:[]
    };
  },

  computed: {
    // 判断设备
    GetIspc() {
      return navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
    },
    //   booklist  start
    search_keys() {
      return this.$store.state[this.$store.state.Namedparent.name].books
        .fieldsAllow.searchKeys;
    },
    search_fields() {
      return this.$store.state[this.$store.state.Namedparent.name].books
        .fieldsAllow.sortFields;
    },
    getNamedparent() {
      return this.$store.state.Namedparent.key;
    },
    // booklist end

    loading_over() {
      return this.$store.state[this.$store.state.Namedparent.name].books
        .loading_over;
    },
    rscontype() {
      return this.$store.state[this.$store.state.Namedparent.name].books
        .rscontype;
    },
    showdetail() {
      return this.$store.state[this.$store.state.Namedparent.name].books
        .showdetail;
    },
    getclassname() {
      return this.$store.state.Namedparent.name;
    },
    getfilters() {
      var that = this;
      var tags = [];
       that.sliderList = [];
              var sliderArray = this.$store.state[this.$store.state.Namedparent.name].books.rs.facetsList;

      
       for(let i=0;i<sliderArray.length;i++){
        for(let j=0;j<sliderArray[i].facetList.length;j++){
          that.sliderList.push(sliderArray[i].facetList[j])
        }
      }
      
      for(var i=0;i<this.$store.state[this.$store.state.Namedparent.name].books.qs.Epac.arr_fieldLists.length;i++){
        for(var j=0;j<Array.from(new Set(that.sliderList)).length;j++){
          if(Array.from(new Set(that.sliderList))[j].code == this.$store.state[this.$store.state.Namedparent.name].books.qs.Epac.arr_fieldLists[i].fieldValue){
              tags.push(this.$store.state[this.$store.state.Namedparent.name].books.qs.Epac.arr_fieldLists[i])
          }
        }
      }
    return tags;
      // return this.$store.state[this.$store.state.Namedparent.name].books.qs.Epac.arr_fieldLists;
    },
    books() {
      // console.log(
      //   "computed MainContent books ",
      //   this.$store.state[this.$store.state.Namedparent.name].books.rs.content
      // );
      return this.$store.state[this.$store.state.Namedparent.name].books.rs
        .content;
    },
    show_sider() {
      return this.$store.state[this.$store.state.Namedparent.name].books
        .show_sider;
    },
    show_pagination() {
      return this.$store.state[this.$store.state.Namedparent.name].books
        .show_pagination;
    },
    sort_fields() {
      return this.$store.state[this.$store.state.Namedparent.name].books
        .fieldsAllow.sortFields;
    },

    page_current() {
      return this.$store.state[this.$store.state.Namedparent.name].books.qs.Epac
        .page == undefined
        ? 1
        : this.$store.state[this.$store.state.Namedparent.name].books.qs.Epac
            .page;
    },
    page_size() {
      return this.$store.state[this.$store.state.Namedparent.name].books.rs
        .pageSize;
    },
    page_size_options() {
      return this.$store.state[this.$store.state.Namedparent.name].books
        .fieldsAllow.pageSizeOptions;
    },
    page_size_default() {
      return this.$store.state[this.$store.state.Namedparent.name].books
        .fieldsAllow.defaultPageSize;
    },

    page_sort_order() {
      return this.$store.state[this.$store.state.Namedparent.name].books.rs
        .sortType;
    },
    page_order_by() {
      return this.$store.state[this.$store.state.Namedparent.name].books.rs
        .sortField;
    },
    total_counts() {
      return this.$store.state[this.$store.state.Namedparent.name].books.rs
        .total;
    },
    facets_lists() {
      return this.$store.state[this.$store.state.Namedparent.name].books.rs
        .facetsList;
    },

    params_search() {
      return this.$store.state[this.$store.state.Namedparent.name].books.qs;
    },
    search_result: {
      get() {
        var sr = {
          total_counts: this.$store.state[this.$store.state.Namedparent.name]
            .books.rs.total_counts,
          page_size: this.$store.state[this.$store.state.Namedparent.name].books
            .rs.pageSize,
          page_current: this.$store.state[this.$store.state.Namedparent.name]
            .books.qs.Epac.page,
          facets_lists: this.$store.state[this.$store.state.Namedparent.name]
            .books.rs.facetsList,
          books: this.$store.state[this.$store.state.Namedparent.name].books.rs
            .content,
          deep: true,
        };
        return sr;
      },
    },
  },

  watch: {
    value(newVal) {
      this.year_start = parseInt(
        this.yeararr[0] + newVal[0] * ((new Date().getFullYear() - 1900) / 100)
      );
      this.year_end = parseInt(
        this.yeararr[1] -
          (100 - newVal[1]) * ((new Date().getFullYear() - 1900) / 100)
      );
    },
  },
  methods: {
    //   f分页 start
    SortTypeChange: function (checked) {
      if (checked) {
        this.$store.commit(
          this.$store.state.Namedparent.name + "/ChangeSortType",
          "asc"
        );
      } else {
        this.$store.commit(
          this.$store.state.Namedparent.name + "/ChangeSortType",
          "desc"
        );
      }
    },
    SortFieldChange: function (sortField) {
      this.$store.commit(
        this.$store.state.Namedparent.name + "/ChangeSortField",
        sortField
      );
    },
    CurrentPageChange: function (currentPage) {
      this.$store.commit(
        this.$store.state.Namedparent.name + "/Changeloading",
        true
      );
      this.$store.commit(
        this.$store.state.Namedparent.name + "/ChangeCurrentPage",
        currentPage
      );
      this.$store.dispatch(
        this.$store.state.Namedparent.name + "/SearchGetBooks"
      );
    },
    // 分页 end

    //点击ok
    handleOk() {
      this.is_bookinfo_visible = false;
    },
    //点击cancel
    handleCancel() {
      this.is_bookinfo_visible = false;
    },
    showDrawer() {
      this.is_drawer_visible = true;
    },
    onDrawerClose() {
      this.is_drawer_visible = false;
    },
    onBookinfoClose() {
      this.is_bookinfo_visible = false;
    },
    onBookinfoShow() {
      this.is_bookinfo_visible = true;
    },
    onSearchSideCollapse(collapsed, type) {
      console.log(
        "onSearchSideCollapse",
        collapsed,
        type,
        this.is_show_sider_bar
      );
    },

    onSearchSideBreakpoint(broken) {
      this.is_show_sider_bar = !broken;
      if (this.is_show_sider_bar) {
        if (!broken) {
          this.is_drawer_visible = false;
        }
      }
    },
    affixChange() {
      this.is_drawer_visible = !this.is_drawer_visible;
    },
    ShowBookId(is_showing, marc_no, title) {
      this.bookinfo_title = title;
      this.book_already_showing = is_showing;
      this.is_bookinfo_visible = true;
      this.$nextTick(() => {
        this.$refs.bookinfo_child.GetBookInfo(marc_no);
      });
    },

    /**
     * 纸书检索
     */
    GetBooksLibsys: function () {
      this.is_init = false;
      this.$store.dispatch("GetBooks");
    },
    handleClose(e) {
      // var fieldclassName = e.fieldName;
      var id = e.fieldCode;
      var code = e.fieldValue;
      var do_search_book = false;
      return new Promise(() => {
        this.$store.commit(
          this.$store.state.Namedparent.name + "/SearchSideUpdateFilters",
          {
            fieldName: id,
            // code:code,
            value:code,
          },
          do_search_book
        );
       });
      // this.$store.commit(
      //   this.$store.state.Namedparent.name + "/SearchSideUpdateFilters",
      //   {
      //     fieldName:
      //       this.$store.state.Namedparent.name == "Paperbook"
      //         ? fieldclassName
      //         : id,
      //     value: code,
      //   },
      //   do_search_book
      // );
      // this.$store.state[this.$store.state.Namedparent.name].books.qs.filters.forEach(item => {
      //     console.log(item)
      //     that.selectvalue.push(item.values[0])
      //   });
    },
  },
  mounted() {
    var keyword = this.$route.query.searchtitle;
    if (keyword) {
      this.$store.commit("ebook/UpdateQsSearchKeyWord", keyword);
      this.$store.dispatch("ebook/GetBooks");
    }
  },
};
</script>

<style scoped>
/* /deep/.amodal .ant-modal {
  width: 50% !important;
}
/deep/.ant-row {
  background: #fff;
}
/deep/.ant-list-grid .ant-col > .ant-list-item {
  margin-bottom: -6px;
}
/deep/.sliderhead .ant-collapse-header {
  color: #fff !important;
} */
/deep/.ant-list-grid .ant-col > .ant-list-item {
  margin-top: 20px;
}
/deep/.ant-collapse-header {
  background: #2780e3;
  color: #fff !important;
}
.text-muted {
  font-size: 15px;
}
.text-muted p {
  border-bottom: 1px dashed #efefef;
  line-height: 2;
}
.text-muteds {
  text-align: center;
  margin: 5px auto;
}
.text-muteds p {
  margin: 0;
  height: 20px;
  line-height: 20px;
  overflow: hidden;
}
.btn-success {
  color: #ffffff;
  background-color: #3fb618;
  border-color: #3fb618;
  text-align: center;
  border: 1px solid transparent;
  padding: 10px 10px;
  font-size: 15px;
}
.btn-successread {
  display: inline;
  color: #ffffff;
  background-color: #3fb618;
  border-color: #3fb618;
  text-align: center;
  border: 1px solid transparent;
  padding: 10px 10px;
  font-size: 15px;
}
.btn-successread:hover {
  background: #25690f;
}
</style>